import React, { useEffect, useState } from 'react'
import { Anchor, Col, Row,  } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { async_shoplist, async_typelist } from '../store/Slice';
import { Grid,Image } from 'react-vant'
import Poput from '../components/Poput';

export default function Fenlei() {

  //获取数据
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch(async_shoplist())
    dispatch(async_typelist())
  }, [])
  let obj = useSelector(state => state.crms1)
  //console.log(obj);

  //左侧数据
  let list = obj.typelist.map(item => {
    return {
      id: `${item.id}`, href: `#${item.id}`, title: item.title, key: `${item.id}`
    }
  })

  //控制弹出层的显示隐藏
  const [visible, setVisible] = useState(false)
  //显示对应的详情页数据
  const [itemobj, setItemobj] = useState({})


  return (
    <div>
      
      <Row>
        {/* 左边 */}
        <Col span={8}>
          <Anchor
            items={
              list
            }
          />
        </Col>
        {/* 右边 */}
        <Col span={16}>
          {obj.typelist.map(item => {
            return <div key={item.id} id={item.id} style={{ height: '700px' }}>
              <h2 style={{ textAlign: 'center' }}>{item.title}</h2>
              <div>
                <Grid>
                  {obj.shoplist.filter(n => n.typeId == item.id).map((v, index) => {
                    return <Grid.Item key={index} icon={<Image src={v.img} height={100} width={100}/>} text={v.title} onClick={() => {
                      setVisible(true)
                      setItemobj(v)
                    }} />
                  })}
                </Grid>
              </div>
            </div>
          })}
        </Col>
      </Row>
      {/* 弹出层 */}
      <Poput visible={visible} itemobj={itemobj} setVisible={setVisible}></Poput>

    </div>
  )
}
